<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"  />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="props.modelValue" 
           @onChange="onChange"  @onCreated="handleCreated" />
    </div>
    <!-- <el-button @click="getHtml">点击获取</el-button> -->
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')
onMounted(() => { 
    console.log(editorRef)
    console.log(valueHtml)
})
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

// 通信 父 -》子的通信
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
}) 
// 子组件修改了需要通知父类
const emit = defineEmits(['update:modelValue'])

const onChange = (editor) => { 
    // console.log("hello 123");
    // console.log(editor.getHtml());
    // console.log(editor.children);
    emit('update:modelValue', editor.getHtml())

}

// const getHtml = () => { 
//     console.log(editorRef.value.getHtml());
//     console.log(editorRef.value.getText());
    
// }
</script>

<style  scoped>

</style>